import React, { Component } from "react";
import { Route } from "react-router-dom";
import About from "./components/About"
import Home from "./components/Home"
import MyNavLink from "./components/MyNavLink";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                {/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}
                <MyNavLink to="/about">
                  About
                </MyNavLink>
                <MyNavLink to="/home">
                  Home
                </MyNavLink>
              </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/home" component={Home}/>
                <Route path="/about" component={About}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
